<script>
import CustomFixDialog from '@/portal4.1/pc/component/common/Dialog/common/CustomFixDialog.vue'
import { count, guestCount, queryAllCustomPager, queryAllGuestCustomPager } from '@/api/resource'
export default {
  components: { CustomFixDialog },
  dicts: ['zy_type'],
  data() {
    return {
      title: '资源下载',
      dialogVisible: false,
      width: '100%',
      modal: true,
      top: '10vh',
      image: require('@/assets/images/download.jpg'),
      bak: require('@/assets/images/bak_lm.jpg'),
      headerImage: require('@/assets/images/header_bak.png'),
      dow: require('@/assets/images/dow.png'),
      word: require('@/assets/images/word1.png'),
      excel: require('@/assets/images/xls.png'),
      pdf: require('@/assets/images/pdf_new.png'),
      totalElements: 0,
      count: [
        { count: 0 },
        { count: 0 },
        { count: 0 },
        { count: 0 },
        { count: 0 }
      ],
      query: {
        page: 1,
        size: 9,
        type: '',
        blurry: ''
      },
      dataList: []
    }
  },
  created() {
    this.initCount()
    this.queryData()
  },
  methods: {
    changeMenu(data) {
      this.query.type = data
      this.queryData()
    },
    initCount() {
      if (this.isGuest) {
        guestCount().then(res => {
          const { data } = res
          this.count = data
        })
      } else {
        count().then(res => {
          const { data } = res
          this.count = data
        })
      }
    },
    getImage(data) {
      if (data === 'doc' || data === 'docx') {
        return this.word
      }
      if (data === 'xls' || data === 'xlsx') {
        return this.excel
      }
      if (data === 'pdf') {
        return this.pdf
      }
      return this.word
    },
    openDialog() {
      this.dialogVisible = true
    },
    queryData() {
      if (this.isGuest) {
        queryAllGuestCustomPager(this.query).then(res => {
          const { data } = res
          this.dataList = data.data
          this.totalElements = data.totalElements
        })
      } else {
        queryAllCustomPager(this.query).then(res => {
          const { data } = res
          this.dataList = data.data
          this.totalElements = data.totalElements
        })
      }
    },
    handleSizeChange(val) {
      this.query.size = val
      this.query.page = 1
      this.queryData()
    },
    handleCurrentChange(val) {
      this.query.page = val
      this.queryData()
    },
    download(data) {
      if (undefined !== data && data !== null) {
        this.saveObject({ file: data.id })
        window.open(data.url, '_blank')
      }
    },
    handleClose() {
      this.dialogVisible = false
    }
  }
}
</script>

<template>
  <custom-fix-dialog
    :title="title"
    :visible.sync="dialogVisible"
    :before-close="handleClose"
    :width="width"
    :modal="modal"
    :top="top"
    append-to-body
  >
    <div class="notice-dialog">
      <div class="custom-left">
        <div class="notice-left-header">
          <span>
            <svg-icon icon-class="dwn" />
          </span>
          <span>教学资源下载</span>
        </div>
        <div class="notice-ul">
          <div class="notice-ul-li" :class="query.type === '' ? 'active' : ''" @click="changeMenu('')">
            <div class="notice-label">全部分类</div>
          </div>
          <div
            v-for="item in dict.zy_type"
            :key="item.id"
            class="notice-ul-li"
            :class="query.type === item.value ? 'active' : ''"
            @click="changeMenu(item.value)"
          >
            <div class="notice-label"> {{ item.label }}</div>
          </div>
        </div>
      </div>
      <div class="custom-right">
        <div class="custom-right-header">
          <div class="custom-query-body">
            <el-input v-model="query.blurry" placeholder="请输入资源文件名称" class="input-with-select">
              <el-button slot="append" icon="el-icon-search" @click="queryData" />
            </el-input>
          </div>
        </div>
        <div class="custom-article">
          <el-image :src="require('@/assets/images/nbg.png')" />
          <div class="custom-article-body">
            <div class="custom-count">
              <div class="custom-count-li">
                {{
                  count[4].count === undefined ? 0 : count[4].count
                }}&nbsp;&nbsp;张
              </div>
              <div class="custom-count-li-label" />
              <div class="custom-count-li-title">表单资源数</div>
            </div>
            <div class="custom-count">
              <div class="custom-count-li">{{
                count[0].count === undefined ? 0 : count[0].count
              }}&nbsp;&nbsp;次</div>
              <div class="custom-count-li-label" />
              <div class="custom-count-li-title">累计下载次数</div>
            </div>
            <div class="custom-count">
              <div class="custom-count-li">{{
                count[1].count === undefined ? 0 : count[1].count
              }}&nbsp;&nbsp;位</div>
              <div class="custom-count-li-label" />
              <div class="custom-count-li-title">累计服务用户</div>
            </div>
            <div class="custom-count">
              <div class="custom-count-li">
                {{
                  count[3].count === undefined ? 0 : count[3].count
                }}&nbsp;&nbsp;个
              </div>
              <div class="custom-count-li-label" />
              <div class="custom-count-li-title">服务部门</div>
            </div>
            <div class="custom-count">
              <div class="custom-count-li">
                {{
                  dict.zy_type.length === undefined ||
                    dict.zy_type.length === null
                    ? 0
                    : dict.zy_type.length
                }}&nbsp;&nbsp;种
              </div>
              <div class="custom-count-li-label" />
              <div class="custom-count-li-title">表单类型</div>
            </div>
          </div>
        </div>
        <div class="custom-content">
          <el-row v-if="dataList" :gutter="20" style="width: 100%;">
            <el-col
              v-for="(item, index) in dataList"
              :key="'s-' + index"
              :span="8"
              class="custom-col"
              style="padding: 10px"
            >
              <div class="file-li">
                <div class="file-image">
                  <el-image :src="getImage(item.ext)" />
                </div>
                <div class="file-content">
                  <div class="file-title">
                    {{ item.fileName }}
                  </div>
                  <div class="file-footer">
                    来源：{{ item.bmmc }}
                  </div>
                  <div class="file-footer">
                    <div class="file-date">
                      创建时间：{{ item.createTime }}
                    </div>
                    <div
                      class="file-number"
                      :style="{ backgroundImage: 'url(' + dow + ')' }"
                    >
                      {{ item.xzcs }}次
                    </div>
                  </div>
                </div>
                <div class="file-download" @click="download(item)">
                  <i class="el-icon-download" />下载
                </div>
              </div>
            </el-col>
          </el-row>
          <el-row v-else :gutter="20">
            <el-empty :image-size="100" />
          </el-row>
        </div>
        <div class="custom-footer">
          <el-pagination
            :current-page.sync="query.page"
            :page-size="query.size"
            layout="prev, pager, next, jumper"
            :total="totalElements"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
    </div>
  </custom-fix-dialog>
</template>

<style lang="scss" scoped>
.notice-dialog {
  width: 100%;
  height: 100%;
  display: flex;
  flex-flow: row nowrap;
  color: var(--edu-text-100);
  .custom-left {
    width: 250px;
    height: 100%;
    background-color: var(--edu-bk-300);
    .notice-left-header {
      width: 100%;
      height: 50px;
      display: flex;
      align-items: center;
      padding: 0 10px;
      box-sizing: border-box;
      span {
        padding: 10px;
        font-size: 1.2rem;
        font-weight: bolder;
        svg {
          font-size: 1.2rem;
          fill: var(--edu-hover-text-100);
        }
      }
    }
    .notice-ul {
      width: 100%;
      height: auto;
      .notice-ul-li {
        margin-top: 5px;
        width: 100%;
        height: 70px;
        padding: 2px 0;
        font-size: 1rem;
        font-weight: 600;
        letter-spacing: 2px;
        cursor: pointer;
        .notice-label {
          width: 100%;
          height: 100%;
          padding: 0 10px;
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }
      .notice-ul-li:hover,.notice-ul-li.active {
        background-color: var(--edu-bk-200);
        border-left: 4px solid var(--edu-hover-text-100);
        color: var(--edu-hover-text-100);
      }
    }
  }
  .custom-right{
    flex: 1 1;
    height: 100%;
    background-color: var(--edu-bk-200);
    display: flex;
    flex-flow: column nowrap;
    .custom-right-header {
      width: 100%;
      height: 50px;
      border-bottom: 1px solid var(--edu-border-100);
      display: flex;
      align-items: center;
      padding-left: 20px;
      .custom-query-body {
        width: 400px;
        height: 100%;
        display: flex;
        align-items: center;
      }
    }
    .custom-article {
      width: 100%;
      height: auto;
      position: relative;
      .el-image {
        width: 100%;
      }
      .custom-article-body {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        display: flex;
        flex-flow: row nowrap;
        align-items: center;
        justify-content: space-between;
        .custom-count {
          width: 100%;
          height: 100%;
          display: flex;
          flex-flow: column nowrap;
          align-items: center;
          justify-content: center;
          text-align: center;
          position: relative;
          .custom-count-li {
            align-items: center;
            display: flex;
            justify-content: center;
            height: 30px;
            font-size: 1.3rem;
            font-weight: bold;
            color: var(--edu-text-100);
          }
          .custom-count-li-label {
            height: 2px;
            width: 27px;
            border-radius: 4px;
            margin: 6px 0;
            background: linear-gradient(90deg,#215ed0 50%,#f9ae0a 0);
          }
          .custom-count-li-title {
            height: 30px;
            font-size: 1rem;
            color: var(--edu-text-300);
          }
        }
        .custom-count:not(:last-child):before{
          content: '';
          width: 1px;
          height: 40px;
          border-left: 2px dashed var(--edu-text-300);
          position: absolute;
          right: -1px;
        }
      }
    }
    .custom-content {
      flex: 1 1;
      width: 100%;
      overflow-y: auto;
      overflow-x: hidden;
      display: flex;
      flex-flow: row wrap;
      padding: 0 10px;
      box-sizing: border-box;
    }
    .custom-footer {
      width: 100%;
      height: 40px;
      display: flex;
      align-items: center;
    }
  }
}
.custom-col {
  margin-top: 20px;
}
.file-li {
  width: 100%;
  height: 148px;
  box-sizing: border-box;
  background-color: var(--edu-bk-100);
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  display: flex;
  flex-flow: row nowrap;
  box-sizing: border-box;
  position: relative;
  cursor: pointer;
}
.file-image {
  flex: 0 1 auto;
  height: 100%;
  width: 108px;
}
.file-image .el-image {
  width: 63px;
  margin-top: 22px;
  margin-left: 22px;
}
.file-content {
  flex: 1 1 auto;
  height: 100%;
  padding-right: 10px;
  box-sizing: border-box;
  display: flex;
  flex-flow: column nowrap;
  padding-left: 5px;
}
.file-title {
  flex: 0 1 auto;
  width: 100%;
  height: 85px;
  padding-top: 20px;
  box-sizing: border-box;
  line-height: 20px;
  font-size: 18px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: var(--edu-text-100);
}
.file-footer {
  flex: 0 1 auto;
  width: 100%;
  height: 20px;
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: var(--edu-text-300);
  display: flex;
  flex-flow: row nowrap;
}
.file-date {
  flex: 1 1 auto;
  height: 100%;
  text-align: left;
}
.file-number {
  flex: 0 1 auto;
  height: 100%;
  text-align: right;
  width: 60px;
  background-repeat: no-repeat;
  background-size: 14px 14px;
}
.custom-col {
  margin-top: 20px;
}
.custom-pager {
  width: 100%;
  height: 40px;
  margin-top: 20px;
}
.file-download {
  position: absolute;
  height: 35px;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--edu-hover-bg-100);
  line-height: 35px;
  color: var(--edu-hover-color-200);
  font-size: 13px;
  text-align: center;
  display: none;
}
.file-li:hover .file-download {
  display: block;
}
</style>
